<template>
    <div class="history">
        <h1 class="title">退款进度:</h1>
        <p class="note" v-if="processList.length===0">暂无进度</p>
        <ul v-else>
            <li v-for="(info, index) in processList" :key="index" :class="{active:activeIndex===index}">
                <div class="circle">
                    <span></span>
                    <div class="col" v-if="index!==0"></div>
                </div>
                <div class="wrap">
                    <div class="row">
                        <h1>{{info.title}}</h1>
                        <p>{{info.created}}</p>
                    </div>
                    <p class="content">{{info.content}}</p>
                </div>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
    import API from '../../../request/api';

    export default {
        name: 'refund-process',
        data() {
            return {
                activeIndex: 0, //当前高亮
                processList: [] // 退款进度
            };
        },
        mounted() {
            let data = {
                after_id: this.$route.query.refundId
            };
            this.request.get(API.afterschedule, data).then(res => {
                // 获取协商历史列表
                this.processList = res.list;
                this.activeIndex = this.processList.length-1;
            }, () => {
            });
        },
        methods: {}
    };
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>
    @import '~assets/main.styl';
    .history {
        width: 100vw
        background grayF
        padding 2vw cellPadding 4vw
        box-sizing border-box
        .note {
            font-size vw(12)
            color: gray9
            padding 2vw cellPadding 6vw
            text-align center
        }
        .title {
            padding 4vw 0 2vw
        }
        ul {
            padding 4vw 0
            li {
                padding 4vw 0
                flex-x(flex-start, flex-start);
                .circle {
                    position: relative
                    flex-y();
                    span {
                        flex: none
                        width: vw(8)
                        height: vw(8)
                        background grayE
                        border-radius 50%
                        z-index: 999
                    }
                    .col {
                        position absolute
                        bottom: 0
                        width: 1px
                        height: 20vw
                        background grayE
                    }
                }
                .wrap {
                    margin-left 5vw
                    .row {
                        flex-x()
                        width: 85vw;
                        padding 0 0 3vw
                        .circle {
                            flex-x();
                        }
                        h1 {
                            color: gray9
                        }
                        p {
                            font-size vw(12)
                            color: gray9
                        }
                    }
                    .content {
                        color: gray9
                        font-size vw(12)
                        margin-bottom 2vw
                    }
                }
                &.active {
                    span {
                        background main-color
                    }
                    .wrap {
                        h1 {
                            color: gray3
                        }
                        p {
                            color: gray3
                        }
                    }
                }
            }
        }
    }
</style>